import { memo } from 'react'
import { Button, Space, Tooltip } from 'antd'
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined,
  UpOutlined,
  DownOutlined,
  RedoOutlined,
  UndoOutlined,
} from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import {
  removeSelectedComponent,
  changeComponentVisible,
  toggleComponentLock,
  copySelectedComponent,
  pasteComponent,
  moveComponent,
} from '@/store/modules/componentsReducer'
import useGetComponentInfo from '@/hooks/useGetComponentInfo'
import { ActionCreators } from 'redux-undo'

const EditToolbar = memo(() => {
  const dispatch = useDispatch()

  const handleDelete = () => {
    dispatch(removeSelectedComponent())
  }

  const { selectedId, selectedComponent, copiedComponent, selectedIndex, componentList } =
    useGetComponentInfo()
  const { isLocked } = selectedComponent || { isLocked: false }

  const handleHidden = () => {
    dispatch(changeComponentVisible({ id: selectedId, isHidden: true }))
  }

  const handleLock = () => {
    dispatch(toggleComponentLock({ id: selectedId }))
  }

  const handleCopy = () => {
    dispatch(copySelectedComponent())
  }

  const handlePaste = () => {
    dispatch(pasteComponent())
  }

  const isFirst = selectedIndex === 0
  const isLast = selectedIndex === componentList.length - 1

  const handleSelectPrev = () => {
    if (!isFirst) {
      dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }))
    }
  }

  const handleSelectNext = () => {
    if (!isLast) {
      dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }))
    }
  }

  const undo = () => {
    dispatch(ActionCreators.undo())
  }

  const redo = () => {
    dispatch(ActionCreators.redo())
  }

  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} onClick={handleDelete}></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handleHidden}></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          type={isLocked ? 'primary' : 'default'}
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLock}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={handleCopy}></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={handlePaste}
          disabled={copiedComponent == null}
        ></Button>
      </Tooltip>
      <Tooltip title="上移">
        <Button
          disabled={isFirst}
          shape="circle"
          icon={<UpOutlined />}
          onClick={handleSelectPrev}
        ></Button>
      </Tooltip>
      <Tooltip title="下移">
        <Button
          disabled={isLast}
          shape="circle"
          icon={<DownOutlined />}
          onClick={handleSelectNext}
        ></Button>
      </Tooltip>
      <Tooltip title="撤销">
        <Button shape="circle" icon={<UndoOutlined />} onClick={undo}></Button>
      </Tooltip>
      <Tooltip title="重做">
        <Button shape="circle" icon={<RedoOutlined />} onClick={redo}></Button>
      </Tooltip>
    </Space>
  )
})

export default EditToolbar
